import React, { useEffect, useState } from 'react';
import { FlatList } from 'react-native';

import { connect } from 'react-redux';

import Item from './item';

const connector = connect();


function Found(props) {
    const { dispatch } = props;
    const [list, setList] = useState([]);
    const [currentId, setCurrentId] = useState('');

    const renderItem = ({ item }) => {

        const paused = item.id !== currentId;

        return <Item data={item} paused={paused} setCurrentId={setCurrentId} />
    }

    useEffect(() => {
        dispatch({
            type: 'found/fetchList',
            callback: (data) => {
                console.log('found/fetchList', data)
                setList(data)
            },
        });
    }, [])

    return <FlatList
        data={list}
        renderItem={renderItem}
        extraData={currentId}
    />
}

export default connector(Found)